<!--
 * @Author: ray ray.chin@163.com
 * @Date: 2021-08-04 18:51:08
 * @LastEditors: ray ray.chin@163.com
 * @LastEditTime: 2024-06-10 11:48:20
 * @FilePath: /app-template-uni-upgrade/src/components/ray-tab/ray-tab.vue
 * @Description: 底部导航
 * Copyright (c) 2023 by ray ray.chin@163.com, All Rights Reserved.
-->
<template>
	<view>
		<view class="tab-main">
			<view v-for="(tab, index) in tabList"
                class="tab-item"
                v-bind:key="`tab${index}`"
                @click="tabItemClick(index, tab)"
            >
                <uni-badge :text="tab.badgeText" :is-dot="showDot"></uni-badge>
				<image class="tab-icon" :src="index == current ? tab.selectedIconPath : tab.iconPath"></image>
				<view :class="index == current ? 'current-tab-color' : ''">{{ tab.text }}</view>
			</view>
		</view>
	</view>

</template>

<script>
    // TODO RAY 中间凸起按钮及功能
	import Vue from 'vue';
    // 详细api参见https://uniapp.dcloud.io/component/uniui/uni-badge
    import uniBadge from "../uni-badge/uni-badge.vue";
    import { setLocalStorage, getLocalStorage } from "@/utils/storageHelper.js";
	export default {
		name: 'ray-tab',
        components: {
            uniBadge
        },
		data() {
			return {
                // 原始导航list
				tabList: [
                    {
						"pagePath": "/pagesRayTemplate/pages/index/index",
						"iconPath": "/static/imgs/tab/ico_rk.png",
						"selectedIconPath": "/static/imgs/tab/ico_rk_on.png",
						"text": "首页",
                        // 角标内容
                        "badgeText": "",
					},
					{
						"pagePath": "/pagesRayTemplate/pages/other/other",
						"iconPath": "/static/imgs/tab/ico_ld.png",
						"selectedIconPath": "/static/imgs/tab/ico_ld_on.png",
						"text": "其他",
                        // 角标内容
                        "badgeText": "",
					},
				],
			};
		},
		props: {
            // 当前选中item位置
			current: {
				type: [Number, String],
				required: true,
				defaut: 0,
			},
            // 角标显示是否为圆点，true为显示原点
            showDot: {
                type: [Boolean],
                require: false,
                default() {
                    return false;
                }
            },
		},
		methods: {
			tabItemClick(index, tab) {
				if (this.current == index) {
					return;
				}
				uni.redirectTo({
					url: tab.pagePath,
				});
			},
		},
        onShow() {
        },
		mounted() {
            let __this = this;
            let localList = getLocalStorage("rayTabList");
            if (localList) {
                __this.tabList = JSON.parse(localList);
            }
            // 列表界面预加载
            if (__this.tabList && __this.tabList.length > 0) {
                __this.tabList.forEach((tab) => {
                    if (tab.pagePath) {
                        uni.preloadPage({url: tab.pagePath});
                    }
                });
            }
            /**
             * 统计角标事件
             * 使用：uni.$emit("updateRayBadgeText", {index: "0", badgeText: "100"});
             * 说明：index为角标添加位置，badgeText为角标内容
             */
            uni.$on ("updateRayBadgeText", function (data) {
                if (data.index && data.badgeText) {
                    __this.tabList[data.index].badgeText = data.badgeText;
                    setLocalStorage("rayTabList", __this.tabList);
                }
            });
		},
		watch: {

		}
	};
</script>
<style lang="scss">
    /deep/ .uni-badge--x {
        display: inline-block;
        position: absolute;
        margin-left: 40rpx;
        margin-top: -10rpx;
    }
	.tab-main {
		font-size: 24rpx;
		display: flex;
		height: 96rpx;
		background: white;
		border-top: 0.1rpx solid #cdcdcd;
		// border-radius: 5rpx;
        width: 100%;
        bottom: 0;
        position: fixed;
        z-index: 999;
	}

	.tab-item {
		/* display: flex; */
        position: relative;
		flex: 1;
		align-items: center;
		justify-content: center;
        margin: auto;
        text-align: center;
		color: #666666;

		.tab-icon {
			height: 48rpx;
			width: 48rpx;
		}

		.current-tab-color {
			color: #007AFF;
		}
	}
</style>
